<template>
    <div id='newslKj'>
        <h1 v-show="isLoading">正在加载······</h1>
        <NewsItem v-for="(e,i) in newsList" :key="e.title" :news="e" />
    </div>
</template>
<script>
    import NewsItem from './NewsItem.vue';
    import axios from 'axios';
    export default {
        components:{NewsItem},
        mounted() {
            this.getNews();
        },
        methods:{
            getNews(){
                this.isLoading = true;
                console.log("链接",this.siteUrl[this.url]);
                let url = this.siteUrl[this.url] || 'https://api.vvhan.com/api/hotlist?type=zhihuHot';
                axios.get(url).then(res=>{
                    let data = res.data.data;
                    this.newsList = eval(data);
                    this.isLoading = false;
                }).catch(err=>{
                    console.log("请求出错了");
                    console.log(err);
                })
            }
        },
        computed:{
            url(){
                return this.$route.params.id;
            }
        },
        watch:{
            deep:true,
            'url'(newVal){
                this.getNews();
            }
        },
        data() {
            return {
                isLoading:true,
                id:999,
                siteUrl:{
                    'zhihu':'https://api.vvhan.com/api/hotlist?type=zhihuHot',
                    'baidu':'https://api.vvhan.com/api/hotlist?type=baiduRD',
                    'tieba':'https://api.vvhan.com/api/hotlist?type=baiduRY',
                    'weibo':'https://api.vvhan.com/api/hotlist?type=wbHot',
                    'hupu':'https://api.vvhan.com/api/hotlist?type=huPu',
                    'lishi':'https://api.vvhan.com/api/hotlist?type=history',
                },
                newsList:[
               
                ]
            }
        },
    }
</script>